<template>
  <div id="app">
    <el-form :model="ruleForm" status-icon :rules="rules" label-position="top" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item class="buttonlist">
        <span class="span-text" @click="goRegister">没有账号？立即注册</span>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  export default {
    data() {
      /**
       * jilanlan 2021-07-03 16:01
       * desc: 用户名的校验
       * @params
       **/

      let validateUser = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入用户名"));
        } else {
          if (this.ruleForm.username !== "") {
            this.$refs.ruleForm.validateField("username");
          }
          callback();
        }
      };

      /**
       * jilanlan 2021-07-03 16:01
       * desc: 密码框的校验
       * @params
       **/
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.ruleForm.pass !== "") {
            this.$refs.ruleForm.validateField("pass");
          }
          callback();
        }
      };

      return {
        ruleForm: {
          username: "",
          pass: "",
          checkPass: ""
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: "blur"}
          ],
          username: [
            {validator: validateUser, trigger: "blur"}
          ]
        }
      };
    },
    created() {

    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log("登录成功");
            window.location.href = "/"
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goRegister() {
        window.location.href = "/register"
      }
    }
  };
</script>

<style scoped>
  #app{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url("../../assets/background.jpeg");
  }
  .demo-ruleForm{
    width: 380px;
    height: 400px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 50px 30px 20px;
    margin: 15% auto 0 50%;
    background-color: rgba(255,255,255, 0.7);
  }
  .buttonlist{
    text-align: right;
  }
  .span-text{
    font-size: 12px;
    position: absolute;
    left: 0;
    color: #999;
    cursor: pointer;
  }
  .span-text:hover{
    color: #409EFF;
  }

</style>
